<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/font-awesome.css" />
        <style>
            
            
            .table-container {
                width: 1000px;
                margin: 15px auto;
                font-size: 16px;
            }

            .table-content {
                border: 1px solid #dddddd;
                border-radius: 6px;
                text-align: center;
            }

            .table-content table {
                margin: 0;
                padding: 0;
                border-collapse: collapse;
            }
            
            tr {
                height: 2em;
                line-height: 2em;
            }
            
            /* 升降箭头 */
            
            .sort {
                position: relative;
                cursor: pointer;
            }
        
            .sort-asc::before, 
            .sort-asc-active::before,
            .sort-desc::after,
            .sort-desc-activbe::after {
                width: 0;
                height: 0;
                content: "";
                position: absolute;
            }
                
            .sort-asc::before,
            .sort-asc-active::before {
                top: 23px;
                right: 5px;
                border: 5px solid transparent;
                border-bottom: 5px solid #dddddd;            
            }
            
            .sort-asc-active::before {
                border-bottom: 5px solid #7e84de; 
            }

            .sort::after, 
            .sort-desc-activbe::after {
                position: absolute;
                bottom: 23px;
                right: 5px;
                border: 5px solid transparent;  
                border-top: 5px solid #dddddd;
            }
            
            .sort-desc-activbe::after {
                border-top: 5px solid #7e84de; 
            }
            
            .sort-narrow::before {
                top: 6px; 
            }
            
            .sort-narrow::after {
                bottom: 6px;
            }
            
            /* 行凸显*/
            
            tr:hover > td {
                background-color: #f5f5f5;
            }
            
            /* 边框 */
            
            th {
                border: 1px solid #dddddd;
            }
            td {
                border: 1px solid #dddddd;
            }
            tbody {
                border-top: 2px solid #dddddd;    
            }
            tr:first-child > th {
                border-top: 0;
            }
            tr:last-child > td {
                border-bottom: 0;
            }
            tr th:first-child, tr td:first-child {
                border-left: 0;
            }
            tr th:last-child, tr td:last-child {
                border-right: 0;
            }
            
            /* 扩展按钮 */
            
            td > i {
                color: #428bca;
            }
            
            td > i:hover {
                color: #2a6496;
                cursor: pointer;
            }
            
            td > a {
                color: #428bca;
                text-decoration: none;
                border-bottom: 1px dashed #428bca;
            }
            
            td > a:hover {
                color: #2a6496;
            }
            
            td {
                position: relative;
            }
            
            .edit-box {
                width: 300px;
                height: 50px;
                line-height: 50px;
                position: absolute;
                bottom: 100%;
                left: calc(50% - 150px);
                border: 1px solid #999;
                border-radius: 6px;
                background: #fff;
                box-shadow: 0 5px 10px rgba(0,0,0,0.2);
                z-index: 9999;
            }
            
            .edit-group div {
                height: 30px;
                padding: 11px 5px;
            }
            
            .edit-group div input[type="text"] {
                height: 28px;
                padding: 0 3px;
                vertical-align: top;
                border: 1px solid #dddddd;
                border-radius: 3px;
            }
            
            .edit-group div i {
                width: 18px;
                padding: 6px;
                margin-left: 2px;
                font-size: 18px;
                border-radius: 25%;
                vertical-align: top;
                cursor: pointer;
            }
            
            .edit-group div .check-btn {
                background-color: #428bca;
                color: #fff;
            }
            
            .edit-group div .close-btn {
                padding: 5px 6px;
                border: 1px solid #bbbbbb;
                background-color: #fff;
                color: #000;
            }
          
            
            .edit-box-tail {
                width: 0;
                height: 0;
                position: absolute;
                bottom: -24px;
                left: calc(50% - 13.5px);
                border: 12px solid transparent;
                border-top-color: rgba(0,0,0,0.1);
            }
            
            .edit-box-tail::after {
                width: 0;
                height: 0;
                content: "";
                position: absolute;
                bottom: -8px;
                left: calc(50% - 10px);
                border: 10px solid transparent;
                border-top: 10px solid #fff; 
            }
            
            
            
        </style>
    </head>
    <body>
        <div class="table-container">
            <div class="table-header"></div>
            <div class="table-content">
                <table>
                    <thead>
                        <tr>
                            <th width="40px" rowspan="2"></th>
                            <th width="40px" rowspan="2"><input type="checkbox" /></th>
                            <th class="sort sort-asc sort-desc" width="120px" rowspan="2">ID</th>
                            <th width="800px" colspan="3">Details</th>  
                        </tr>
                        <tr>
                            <th class="sort sort-asc sort-desc sort-narrow" width="266.6px">A</th>  
                            <th class="sort sort-asc sort-desc sort-narrow" width="266.6px">B</th> 
                            <th class="sort sort-asc sort-desc sort-narrow" width="266.6px">C</th> 
                        </tr>                        
                    </thead>
                    <tbody>
                        <tr>
                            <td><i class="fa fa-plus"></i></td>
                            <td><input type="checkbox" /></td>
                            <td>0</td>
                            <td>
                                <a href="javascript:">xxxxxxxXxxxxxxx</a>
                            </td>
                            <td>
                                <a href="javascript:">xxxxxxxXxxxxxxx</a>
                            </td>
                            <td>
                                <a href="javascript:">xxxxxxxXxxxxxxx</a>
                            </td>
                        </tr>
                        
                        <tr>
                            <td colspan="6">
                                <div>
                                    <img src="img/face.jpg"/>
                                </div>
                            </td>
                        </tr>
                        
                        <tr>
                            <td><i class="fa fa-plus"></i></td>
                            <td><input type="checkbox" /></td>
                            <td>1</td>
                                
                            <td>
                                <a href="javascript:">xxxxxxxXxxxxxxx</a>
                            </td>
                            <td>
                                <a href="javascript:">xxxxxxxXxxxxxxx</a>
                            </td>
                            <td>
                                <a href="javascript:">xxxxxxxXxxxxxxx</a>
                            </td>
                        </tr>
                        <tr>
                            <td><i class="fa fa-plus"></i></td>
                            <td><input type="checkbox" /></td>
                            <td>2</td>
                                
                            <td>
                                <a href="javascript:">xxxxxxxXxxxxxxx</a>
                            </td>
                            <td>
                                <a href="javascript:">xxxxxxxXxxxxxxx</a>
                            </td>
                            <td>
                                <a href="javascript:">xxxxxxxXxxxxxxx</a>
                            </td>
                        </tr>
                        <tr>
                            <td><i class="fa fa-plus"></i></td>
                            <td><input type="checkbox" /></td>
                            <td>3</td>
                                
                            <td>
                                <a href="javascript:">xxxxxxxXxxxxxxx</a>
                            </td>
                            <td>
                                <a href="javascript:">xxxxxxxXxxxxxxx</a>
                            </td>
                            <td>
                                <a href="javascript:">xxxxxxxXxxxxxxx</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="table-footer"></div>
        </div>
        <script src="js/jquery-2.2.0.min.js"></script>
        <script>
            
            class EditBox {
                
                constructor() {
                    this.target = null;
                    this.element = $(`
                    <div class="edit-box">
                        <div class="edit-group">
                            <div>
                                <input type="text" />
                                <i class="fa fa-check check-btn"></i>
                                <i class="fa fa-close close-btn"></i>
                            </div>        
                        </div>
                        <div class="edit-box-tail"></div>
                    </div>`);
                }
                
                init() {
                    this.element.find('.check-btn').click(() => this.onUpdate());
                    this.element.find('.close-btn').click(() => this.onClose());
                }
                
                value(value) {
                    if(value !== undefined) {
                        this.element.find('input').val(value);
                    } else {
                        return this.element.find('input').val();
                    }
                }
                
                clear() {
                    this.value('');
                }
                
                apply() {
                    this.target && this.target.html(this.value());
                }
                
                onUpdate() {
                    this.apply();
                    this.onClose();
                }
                
                onClose() {
                    this.target && this.target.siblings('.edit-box').remove();
                    this.target = null;                    
                }
                
                insertAfter(target) {                            
                    this.onClose();
                    this.value(target.html());
                    this.target = target;
                    this.init();
                    this.element.insertAfter(target);            
                }
            }
            
            
            $(() => {
                
                const table = $('table'),
                      thead = table.find('thead'),
                      tbody = table.find('tbody');
                
                const editbox = new EditBox();
                
                $('td a').click(function() {
                    editbox.insertAfter($(this));
                }); 
            });
        </script>
    </body>
</html>